$padding-top: 3px;
$padding-lr: 6px;
$padding-lr-radio: 8px;
$height-btn: $height-input;
$radius-btn: $radius;
$radius-switch: 15px;
$btn-padding-tb: 2px;
$btn-padding-lr: 8px;
$fz-button: 12px;



$checkbox-shadow: false;

.tool-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
}

.center{
  text-align: center;
}

$btns: (
        'primary' : white,
        'green'   : $green,
        'cyan'    : $cyan,
        'blue'    : $blue,
        'purple'  : $purple,
        'yellow'  : $yellow,
        'orange'  : $orange,
        'roseo'   : $roseo,
        'red'     : $red,
        'gray'    : $gray,
);

.btn-ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
}
.btn{
  font-size: $fz-button;
  color: inherit;
  line-height: $height-btn - $btn-padding-tb * 2;
  cursor: pointer;
  margin: 0;
  @include border-radius($radius-btn);
  white-space: nowrap;
  padding: $btn-padding-tb $btn-padding-lr ;
  background-color: white;
  @extend .unselectable;
  &:active{
    @include transform(translateY(2px));
    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
    @include transition(all 0s);
  }
  @include transition(all 0.3s);
  &:hover{
    @include transition(all 0.3s);
    &:active{
      @include transition(all 0s);
    }
  }
}

$height-btn-sm: $height-input - 6;
$btn-sm-padding-tb: 2px;
$btn-sm-padding-lr: 3px;


.btn-sm {
  font-size: $fz-button - 1;
  line-height: $height-btn-sm - $btn-sm-padding-tb * 2;
  padding: $btn-sm-padding-tb $btn-sm-padding-lr ;
}

.no-border{
  border: none !important;
  @include box-shadow(0 0 1px rgba(0,0,0,0.4))
}


@each $name, $color in $btns {
  // BTN
  .btn-#{$name}{
    @if $name == primary {
      color: $text-main;
      background-color: $color;
      border: 1px solid darken($color, 15%);
    } @else {
      color: white;
      background-color: $color;
      border: 1px solid $color;
    }
    &:hover{
      @if $name == primary {
        background-color: darken($color, 3%);
        border-color: darken($color, 18%);
      } @else {
        background-color: darken($color, 8%);
        border-color: darken($color, 8%);
      }
    }
    &:active{
      background-color: darken($color, 10%);
    }
  }

  // BTN-ALT
  .btn-alt-#{$name}{
    border: 1px solid transparent;
    background-color: transparent;
    @if $name == primary {
      color: $text-main;
    } @else {
      color: $color;
    }
    &:hover{
      @if $name == primary {
        border-color: $text-main;
        color: $text-main;
      } @else {
        color: $color;
        border-color: $color;
      }
    }
    &:active{
      @if $name == primary {
        color: $text-main;
      } @else {
        color: $color;
      }
    }
  }
}

input[type=checkbox],
input[type=radio]
{
  display: none;
}

$height-checkbox: 14px;
$border-color-checkbox: #d6d6d6;
input[type=checkbox] + label.checkbox{
  cursor: pointer;
  display: block;
  width: $height-checkbox;
  background-color: white;
  height: $height-checkbox;
  @include border-radius(3px);
  border: 1px solid $border-color-checkbox;
  position: relative;
  @if $checkbox-shadow{
    @include box-shadow(inset 1px 1px 2px rgb(0 0 0 / 12%))
  }
}

label.checkbox:hover{
  border-color: $color-main !important;
  @if $checkbox-shadow {
    @include box-shadow(inset 1px 1px 2px transparentize($color-main, 0.8) !important) ;
  }
}

input[type=checkbox]:checked + label.checkbox{
  &:after{
    content: '';
    display: block;
    position: absolute;
    height: $height-checkbox - 6;
    width: $height-checkbox - 6;
    top: 2px;
    left: 2px;
    @include border-radius(3px);
    background-color: $color-main;
  }
  border-color: $color-main;
}

input[type=radio] + label.radio{
  cursor: pointer;
  display: block;
  width: $height-checkbox;
  background-color: white;
  height: $height-checkbox;
  @include border-radius(10px);
  border: 1px solid $border-color-checkbox;
  position: relative;
  @if $checkbox-shadow{
    @include box-shadow(inset 1px 1px 2px rgb(0 0 0 / 12%))
  }
}

label.radio:hover{
  border-color: $color-main !important;
  @if $checkbox-shadow {
    @include box-shadow(inset 1px 1px 2px transparentize($color-main, 0.8) !important) ;
  }
}

input[type=radio]:checked + label.radio{
  &:after{
    content: '';
    display: block;
    position: absolute;
    height: $height-checkbox - 8;
    width: $height-checkbox - 8;
    top: 3px;
    left: 3px;
    @include border-radius(10px);
    background-color: $color-main;
  }
  border-color: $color-main;
}


